<html>

<head>
    <title>OpenGlobus - Earth planet</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../css/og.css" type="text/css" />
</head>

<body>
    <div id="globus" style="width:100%;height:100%"></div>
    <script type="module">
        'use strict';

        import { Globe } from '../../src/og/Globe.js';
        import { XYZ } from '../../src/og/layer/XYZ.js';
        import { GeoImage } from '../../src/og/layer/GeoImage.js';
        import { GlobusTerrain } from '../../src/og/terrain/GlobusTerrain.js';
        import { LonLat } from '../../src/og/LonLat.js';

        let osm = new XYZ("OpenStreetMap", {
            isBaseLayer: true,
            url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            visibility: true,
            attribution: 'Data @ OpenStreetMap contributors, ODbL'
        });

        let img = new GeoImage("Kilimanjaro SPOT-7", {
            src: "SPOT 7 Satellite Image Kilimanjaro.jpg",
            corners: [[37.286664453664194, -3.0473247187887442], [37.38444113753977, -3.0468478037959073], [37.384014813048736, -3.0904441121085506], [37.29373990291454, -3.09380219219323]],
            visibility: true,
            isBaseLayer: false,
            attribution: '<a href="//www.satimagingcorp.com/">www.satimagingcorp.com</a> SPOT-7',
            opacity: 0.8
        });

        let globus = new Globe({
            "target": "globus",
            "name": "Earth",
            "terrain": new GlobusTerrain(),
            "layers": [osm, img]
        });

        globus.planet.flyLonLat(new LonLat(37.34, -3.07, 19500));
    </script>
</body>

</html>